<template>
  <div class="goods-container" @click="product()">
    <i v-if="goods.lastAmount === '0'" class="iconfont icon-shouwan empty"></i>
    <img
      :src=" goods.img === undefined || goods.img === '' ? '../../../static/images/unknown.png' : goods.img "
      class="goods-img"
    />
    <p class="detail">{{ goods.title }}</p>
    <p class="price">￥{{ goods.salePrice }}</p>
  </div>
</template>
<script>
export default {
  props: {
    goods: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {};
  },
  methods: {
    product: function () {
      this.$store.commit("saveProductId", this.goods.id);
      this.$router.push({
        path: "/pages/productDetails"
      });
    }
  }
};
</script>
<style scoped lang="less">
.goods-container {
  background-color: #fff;
  padding: 10px;
  text-align: center;
  margin: 0 auto;
  width: 50%;
  box-sizing: border-box;
  float: left;
  position: relative;
  box-shadow: 1px 1px 1px -6px rgba(0, 0, 0, 0.5);
  font-weight: 300;
  .empty {
    position: absolute;
    font-size: 50px;
    right: 0;
    opacity: 0.5;
    top: 0;
  }
  .goods-img {
    height: 125px;
    width: 95%;
  }
  .detail {
    font-size: 14px;
    padding: 10px 0 2px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .price {
    font-weight: 400;
    color: #c89f62;
  }
}
</style>